<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="h_top">
            <!-- logo -->
            <img src="img/LOGO.png" alt="logo">
            <!-- 搜索框 -->
            <div class="inp">
                <input type="text" placeholder="请输入商品名称">
            </div>
            <!-- 地区    -->
            <div class="sel">
                <select name="" id="">
                    <option value="">广州市</option>
                    <option value="">深圳市</option>
                    <option value="">北京市</option>
                </select>
                <!-- 三角形 -->
                <i></i>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="h_bt">
            <ul>
                <li><img src="img/top.png" alt=""></li>
                <li><img src="img/top.png" alt=""></li>
            </ul>
            <!-- 轮播图进度条 -->
            <div class="bar">
                <div></div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main>
        <div class="tg">
            <div class="title_1">
                <div class="lt">
                    <img src="img/团购.png" alt="">
                    <h3>优惠团购</h3>
                </div>
                <div class="rt">
                    <h5>更多</h5>
                    <img src="img/更多.png" alt="">
                </div>
            </div>
            <div class="box">
                <img src="img/团购1.png" alt="">
                <img src="img/团购2.png" alt="">
                <img src="img/团购3.png" alt="">
                <img src="img/团购4.png" alt="">
            </div>
        </div>

        <div class="xh">
            <div class="title_1">
                <div class="lt">
                    <img src="img/xin.png" alt="">
                    <h3>猜你喜欢</h3>
                </div>
                <div class="rt">
                    <h5>更多</h5>
                    <img src="img/更多.png" alt="">
                </div>
            </div>
            <a href="详情页.html">
                <div class="box">
                    <div class="box1">
                        <img src="img/xin-1.png" alt="">
                        <div>
                            <h5>万岁寿司（正佳店）</h5>
                            <p>[100店通用] 双人套餐</p>
                            <span>￥88.00</span>
                        </div>
                        <div>
                            <p>&lt;100m</p>
                            <p>已售1000</p>
                        </div>
                    </div>
            </a>
            <div class="box1">
                <img src="img/xin-2.png" alt="">
                <div>
                    <h5>万岁寿司（正佳店）</h5>
                    <p>[100店通用] 双人套餐</p>
                    <span>￥88.00</span>
                </div>
                <div>
                    <p>&lt;100m</p>
                    <p>已售1000</p>
                </div>
            </div>


            <a href="详情页.html">
                <div class="box">
                    <div class="box1">
                        <img src="img/xin-1.png" alt="">
                        <div>
                            <h5>万岁寿司（正佳店）</h5>
                            <p>[100店通用] 双人套餐</p>
                            <span>￥88.00</span>
                        </div>
                        <div>
                            <p>&lt;100m</p>
                            <p>已售1000</p>
                        </div>
                    </div>
            </a>
            <div class="box1">
                <img src="img/xin-2.png" alt="">
                <div>
                    <h5>万岁寿司（正佳店）</h5>
                    <p>[100店通用] 双人套餐</p>
                    <span>￥88.00</span>
                </div>
                <div>
                    <p>&lt;100m</p>
                    <p>已售1000</p>
                </div>

            </div>
            <p>已经到底了</p>
        </div>

    </main>

    <!-- 底部导航栏 -->
    <nav>

        <div>
            <a href="index.html">
                <img src="img/首页.png" alt="">
                <h5>首页</h5>
            </a>
        </div>
        <div>
            <a href="分类.html">
                <img src="img/分类4.png" alt="">
                <h5>分类</h5>
            </a>
        </div>
        <div>
            <a href="发现.html">
                <img src="img/发现.png" alt="">
                <h5>发现</h5>
            </a>
        </div>
        <div>
            <a href="我的.html">
                <img src="img/我的.png" alt="">
                <h5>我的</h5>
            </a>
        </div>
    </nav>

</body>

</html>